<template>
	<view class="container">
		<!-- <st-navigation title="促销活动" :subtitle="salesPromotion.length && `共${salesPromotion.length}个`"></st-navigation> -->

		<view class="sales-promotion">
			<view class="sales-promotion-item" v-for="(item, index) of salesPromotion" :key="index"
				@click="handleToYsmSalesPromotionDetail(item)">
				<view class="sales-promotion-item-name">{{ item.title }}</view>
				<image :src="item.img" mode="aspectFill"></image>
				<view class="sales-promotion-item-info">
					<!-- <view class="sales-promotion-item-name">{{ item.title }}</view> -->
					<view class="sales-promotion-item-desc">
						<text>活动倒计时：</text>
						{{ item.timeStr }}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			salesPromotion: [
				/* {
					name: '9月开工季',
					desc: '0天  03:27:59',
					img: '../../static/images/ysmSalesPromotion/sales-promotion-1.png'
				}, */
			],


			scrollStype: false, //滚动状态
			Opacity: 0,
			reload: false, //判断是否上拉
			page: 1,
			last_page: 0,
			status: 'loading',
			contentText: {
				contentdown: '',
				contentrefresh: '正在加载..',
				contentnomore: '没有更多数据了'
			},
			timer: null,
		};
	},
	onLoad() {
		this.loadData();
	},
	// 监听上拉
	onPullDownRefresh() {
		this.page = 1;
		this.reload = true;
		this.loadData();
	},
	// 下拉刷新
	onReachBottom() {
		if (this.page >= this.last_page) {
			this.status = 'noMore';
		} else {
			this.reload = false;
			this.contentText.contentdown = '上拉显示更多';
			this.page = this.page + 1; //页码+1
			this.status = 'loading';
			this.loadData();
		}
	},
	methods: {
		loadData() {
			let params = {
				// page: this.page,
			}
			this.$api.get({
				url: '/wanlshop/user/getActivitylist',
				data: params,
				success: res => {
					console.log(res);
					uni.stopPullDownRefresh();
					this.status = 'more';
					this.salesPromotion = this.reload ? res.data : this.salesPromotion.concat(res.data); //数据 追加
					
					this.renderData();
					this.timer = setInterval(() => {
						this.renderData();
					}, 1000);

					this.page = res.current_page; //当前页码
					this.last_page = res.last_page; //总页码
				},
			});
		},

		renderData() {
			this.salesPromotion.forEach((item, index) => {
				let countDown = this.countDown(item.endtime);
				if (countDown.day <= '00' && countDown.hour <= '00' && countDown.minute <= '00' && countDown.second <= '00') {
					item.timeStr = '活动已结束';
					return;
				}
				let timeStr = `${countDown.day}天 ${countDown.hour}:${countDown.minute}:${countDown.second}`;
				this.$set(this.salesPromotion[index], 'timeStr', timeStr);
			});
		},

		// 根据时间戳倒计时
		countDown(time) {
			let now = new Date().getTime();
			let diff = time * 1000 - now;
			let day = Math.floor(diff / (24 * 60 * 60 * 1000));
			let hour = Math.floor((diff % (24 * 60 * 60 * 1000)) / (60 * 60 * 1000));
			let minute = Math.floor((diff % (60 * 60 * 1000)) / (60 * 1000));
			let second = Math.floor((diff % (60 * 1000)) / 1000);
			return {
				day: day < 10 ? '0' + day : day,
				hour: hour < 10 ? '0' + hour : hour,
				minute: minute < 10 ? '0' + minute : minute,
				second: second < 10 ? '0' + second : second,
			}
		},


		handleToYsmSalesPromotionDetail(item) {
			let activityDetail = encodeURIComponent(JSON.stringify(item));
			uni.navigateTo({
				url: `/pagesYSM/ysmSalesPromotion/ysmSalesPromotionDetail?activityDetail=${activityDetail}`
			});
		}
	},
	// 销毁
	onUnload() {
		clearInterval(this.timer);
	}
}
</script>

<style lang="less" >
page {
	background-color: #FFFFFF;
}
.sales-promotion {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-gap: 20rpx;
	padding: 24rpx;

	.sales-promotion-item {
		width: 100%;
		margin: 0 auto;
		background: #FFFFFF;
		border: 0.5px solid #E6E6E6;

		image {
			height: 192rpx;
			width: 100%;
		}
		.sales-promotion-item-name {
				font-weight: 600;
				font-size: 24rpx;
				line-height: 34rpx;
				color: #000000;
				padding: 18rpx;
				width: 340rpx;
				text-overflow: ellipsis;
				white-space: nowrap;
				overflow: hidden;
			}
		.sales-promotion-item-info {
			padding: 28rpx 24rpx;

			.sales-promotion-item-name {
				margin-bottom: 10rpx;
				font-weight: 600;
				font-size: 24rpx;
				line-height: 34rpx;
				color: #000000;
			}

			.sales-promotion-item-desc {
				text {
					font-weight: 400;
					color: #999999;
				}

				font-size: 22rpx;
				color: #000000;
			}
		}
	}

}</style>
